<!--
 * @Description: 
 * @Version: 
 * @Autor: kkz <keke.zhang@seaboxdata.com>
 * @Date: 2024-03-12 17:09:58
 * @LastEditors: kkz
 * @LastEditTime: 2024-05-21 18:38:59
-->
<script setup>
import { ref } from 'vue'
import request from '@/utils/request'
// import { ElMessage } from 'element-plus'
// import { useUserStore } from '@/stores'
// import { storeToRefs } from 'pinia'
// const { loginUserInfo } = storeToRefs(useUserStore())
// const { setLoginUserInfoImg } = useUserStore()

const dialogVisible = ref(false)
const uploadDialogVisible = ref(false)
const userData = ref({})
const workloadList = ref([])
const selectedRow = ref(null)
// const numberInput = ref(0)
// const fileList = ref([]);
const selectedFile = ref(null)

// //获取登录用户
// const userInfo = ref({
//   id: loginUserInfo.value.userId,
//   name: loginUserInfo.value.userName
// })

const getWorkList = () => {
  request({
    url: '/workloads/list',
    method: 'get',
    params: {
      userId: userData.value.userId,
      year: userData.value.year,
      month: userData.value.month,
      photo: userData.value.proofPictureUrl
    }
  }).then((res) => {
    workloadList.value = res.data
  })
}

// 组件对外暴露一个方法 open,  基于 open 的参数，初始化表单数据，并判断区分是添加 还是 编辑
//1. open({ })                   =>  添加操作，添加表单初始化无数据
//2. open({ id: xx,  ...  })  =>  编辑操作，编辑表单初始化需回显
//open调用后，可以打开弹窗
const open = async (row) => {
  dialogVisible.value = true
  userData.value = { ...row }
  getWorkList()
}
//暴露方法
defineExpose({
  open
})

//上传照片和确认工作量
const uploadPhoto = (row) => {
  selectedRow.value = row
  uploadDialogVisible.value = true
}

const fileInput = ref(null)

const onFileOneChange = (event) => {
  console.log(event)
  const file = event.target.files[0]
  selectedFile.value = file
}
const onFileChange = () => {
  console.log('selectedFile', selectedFile.value) //文件在这里
  const formData = new FormData()

  // 在这里你可以处理文件，比如上传等

  formData.append('file', selectedFile.value)
  formData.append('id', selectedRow.value.id)
  request
    .post('/workloads/leaderVerify', formData, {
      // 注意：不需要手动设置 Content-Type，axios 会自动处理
    })
    .then(() => {
      uploadDialogVisible.value = false
      ElMessage({
        type: 'success',
        message: '添加成功'
      })
      getWorkList()
    })
  window.location.reload()
}
</script>

<template>
  <el-dialog v-model="dialogVisible" title="工作量具体明细" center width="30%">
    <div>
      <el-table :data="workloadList" stripe height="300" style="width: 100%">
        <el-table-column type="index" width="80" label="序号" align="center" />
        <el-table-column
          prop="committedWorkloads"
          label="工作量"
          align="center"
        />
        <el-table-column prop="submissionDate" label="时间" align="center" />
        <!-- 添加图片列 -->
        <el-table-column label="图片" align="center" width="100">
          <template #default="{ row }">
            <img
              :src="row.proofPictureUrl"
              alt="图片描述"
              style="width: 50px; height: auto"
            />
          </template>
        </el-table-column>
        <!-- 添加按钮列 -->
        <el-table-column label="操作" align="center" width="120">
          <template #default="{ row }">
            <el-button type="primary" @click="uploadPhoto(row)">确认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template> -->
  </el-dialog>

  <el-dialog v-model="uploadDialogVisible" title="上传图片" center width="30%">
    <div>
      <input
        type="file"
        ref="fileInput"
        accept="image/*"
        @change="onFileOneChange"
      />
      <!-- <el-upload
        action=""
        :file-list="fileList"
        list-type="picture"
        :auto-upload="false"
        :on-success="handleSuccess"
      >
        <el-button  type="primary">选取文件</el-button>
      </el-upload> -->
      <!-- <el-input-number v-model="numberInput" :min="0" label="数字输入框" placeholder="请输入数字" style="margin-top: 20px;" /> -->
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onFileChange">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
